<template>
    <div>
        <el-page-header @back="backHandle" content="悬赏详情"></el-page-header>
        <el-descriptions  direction="vertical" :column="4" border>
            <el-descriptions-item label="发布这用户名/编号">Leem-12465</el-descriptions-item>
            <el-descriptions-item label="服务者这用户名/编号">Leem-12465</el-descriptions-item>
            <el-descriptions-item label="发布时间">2022年2月23日16:42:57</el-descriptions-item>
            <el-descriptions-item label="接单时间">2022年2月23日16:42:57</el-descriptions-item>
            <el-descriptions-item label="发布时位置信息" :span=2>福建省厦门市</el-descriptions-item>
            <el-descriptions-item label="接单时位置信息" :span=2>福建省厦门市</el-descriptions-item>
            <el-descriptions-item label="悬赏类型">普通悬赏</el-descriptions-item>
            <el-descriptions-item label="发布消耗积分量">20</el-descriptions-item>
            <el-descriptions-item label="赏金金额">20</el-descriptions-item>
            <el-descriptions-item label="支付状态">已支付</el-descriptions-item>
            <el-descriptions-item label="悬赏内容" :span='4'>悬赏内容</el-descriptions-item>
            <el-descriptions-item label="日志" :span='4'>
                <el-timeline>
                    <el-timeline-item
                        v-for="(activity, index) in activities"
                        :key="index"
                        color='#409eff'
                        :timestamp="activity.timestamp">
                        {{activity.content}}
                    </el-timeline-item>
                </el-timeline>
            </el-descriptions-item>
        </el-descriptions>
    </div>
</template>

<script>
    export default {
        data () {
            return {
                activities: [
                    {
                        content: '用户:leem发布悬赏',
                        timestamp: '2018-04-11'
                    },
                    {
                        content: '通过审核，审核人：Object',
                        timestamp: '2018-04-13'
                    },
                    {
                        content: '徐大庆接单',
                        timestamp: '2018-04-14 8:00:00'
                    }, 
                    {
                        content: '徐大庆联系用户',
                        timestamp: '2018-04-14 10:00:00'
                    }, 
                    {
                        content: '平台人员：Object更换了服务人员',
                        timestamp: '2018-04-14 10:00:00'
                    }, 
                    {
                        content: '李四接单',
                        timestamp: '2018-04-14 10:00:00'
                    },
                    {
                        content: '李四联系用户',
                        timestamp: '2018-04-14 10:00:00'
                    },
                    {
                        content: '李四确认完成',
                        timestamp: '2018-04-14 10:00:00'
                    },
                    {
                        content: '用户:leem确认完成',
                        timestamp: '2018-04-14 10:00:00'
                    }
                ]
            }
        },
        methods : {
            backHandle () {
                window.close();
            }
        }
    }
</script>

<style lang='less' scoped>

</style>